<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Please enter your information</title>
<link rel="stylesheet" type="text/css" href="css/site.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript" src="scripts/validate.js"></script>

<script src="scripts/script.js"></script>
<script
	src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript">

	function checkForm() {
		var username = $("#login_name").val();
		var pass1 = $("#login_password").val();
		
		var SELECTOR_ERRORS = $('#error_box2');
		var error = true;
		re = /^\w+$/;
		if (!re.test(username)) {
			SELECTOR_ERRORS.append("Username must contain only letters, numbers and underscores" + '<br />');
			error = false;
		}
		if (pass1 == username) {
			SELECTOR_ERRORS.append("Password must be different from username" + '<br />');
			error = false;
		}
		re = /[0-9]/;
		if (!re.test(pass1)) {
			SELECTOR_ERRORS.append("Password must contain at least one number (0-9)" + '<br />');
			error = false;
		}
		re = /[a-z]/;
		if (!re.test(pass1)) {
			SELECTOR_ERRORS.append("Password must contain at least one lowercase letter (a-z)" + '<br />');
			error = false;
		}
		re = /[A-Z]/;
		if (!re.test(pass1)) {
			SELECTOR_ERRORS.append("Password must contain at least one uppercase letter (A-Z)" + '<br />');
			error = false;
		}
		return error;
	}
</script>
<style>
#login label {
	display: inline-block;
	width: 100px;
	text-align: right;
}

#login_submit {
	padding-left: 100px;
}

#login div {
	margin-top: 1em;
}

textarea {
	vertical-align: top;
	height: 5em;
}

.error {
	display: none;
	margin-left: 10px;
}

.error_show {
	color: red;
	margin-left: 10px;
}

input.invalid,textarea.invalid {
	border: 2px solid red;
}

input.valid,textarea.valid {
	border: 2px solid green;
}
</style>
</head>
<body>
	<div><%@include file="/WEB-INF/header.jsp"%></div>
	<div class="content-wrapper">
		<div id="body" style="background:;">
			<section class="container">
				<div class="login">
					<h1>Register</h1>
					<div class="error_show" id="error_box2"></div>
					<form id="register" method="post" action="Registration">
						<div>
							First Name:
							<p>
								<input type="text" id="login_first_name" name="firstName" value=""> 
								<span id="error1" class="error">Error</span>
							</p>
						</div>
						<div>
							Last Name:
							<p>
								<input type="text" id="login_last_name" name="lastName" value=""> 
								<span id="error1" class="error">Error</span>
							</p>
						</div>
						<div>
							Username:
							<p>
								<input type="text" id="login_name" name="username" value=""> 
								<span id="error1" class="error">Username is required</span>
							</p>
						</div>

						<div>
							Password:
							<p>
								<input type="password" id="login_password" name="pwd1" value=""> 
								<span id="error2" class="error">Password is required</span>
							</p>
						</div>

						<div>
							Confirm Password:
							<p>
								<input type="password" id="login_password2" name="pwd2" value=""> 
								<span class="error">Password is required</span>
							</p>
						</div>

						<div>
							Organization:
							<p>
								<input type="text" id="ogranization" name="organization" value="">
							</p>
						</div>

						<div>
							Address: 
							<p>
								<input type="text" id="address" name="address" value="">
							</p>
						</div>

						<div id="login_submit">
							<p class="submit">
								<input class="button" type="submit" name="commit" value="Login">
							</p>
						</div>
						<input type="hidden" name="errors" id="errors" value="false">
					</form>
					
					<c:if test="${not empty requestScope.loginError}">
  						<span id="loginError" style="color: #FF0000"> <c:out value="${requestScope.loginError}" /></span>
					</c:if>
			
				</div>
			</section>
		</div>
	</div>


</body>

<script>
var validator = new FormValidator('register', [{
    name: 'firstName',
    display: 'First Name',
    rules: 'required|alpha'
}, {
    name: 'lastName',
    display: 'Last Name',
    rules: 'required|alpha'
}, {
    name: 'username',
    display: 'Username',
    rules: 'required|alphanumeric'
}, {
    name: 'pwd1',
    display: 'Password',
    rules: 'required'
}, {
    name: 'pwd2',
    display: 'Password confirmation',
    rules: 'required|matches[pwd1]'
}], function(errors, event) {
	var SELECTOR_ERRORS = $('#error_box2');
	
    if (errors.length > 0) {
        SELECTOR_ERRORS.empty();

        for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
            SELECTOR_ERRORS.append(errors[i].message + '<br />');
        }
        $("#errors").val("true");
		$("#loginError").hide();
        event.preventDefault();
    }  
    
    if(!checkForm()){
    	event.preventDefault();
    }
	

});

</script>
</html>